<!-- 个人信息页面 -->
<style>
  th,td{
    padding: 10px;
    /* border: 1px solid red ; */
  }
  .img img{
    width: 150px;
    height: 150px;
    float: right;
    margin-right: 850px;
    margin-top:50px;
  }
</style>
<div class="img">
  <img src="./images/images/user.jpg" alt="">
</div>
<table>
  <tbody>
    <tr>
      <th>用户名</th>
    </tr>
    <tr>
      <th>姓名</th>
    </tr>
    <tr>
      <th>手机号</th>
    </tr>
    <tr>
      <th>性别</th>
    </tr>
    <tr>
      <th>注册事件</th>
    </tr>
    <tr>
      <th>状态</th>
    </tr>
  </tbody>
</table>

<!-- 模态框 -->
<button class="btn btn-default" type="submit" data-toggle="modal" data-target="#exampleModal">修改</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">添加用户</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">用户名</label>
            <input type="text" class="form-control modal-input" id="recipient-name" disabled >
          </div>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">姓名</label>
            <input type="text" class="form-control modal-input" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">密码</label>
            <input type="password" class="form-control modal-input" id="recipient-name">
          </div>
        <div class="form-group">
            <label for="recipient-name" class="col-form-label  ">性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              
                <input class="form-check-input  " type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">男&nbsp;&nbsp;</label>
              
             
                <input class="form-check-input " type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label " for="inlineRadio2">女</label>
             
            </label>
            
          </div>

          <div class="form-group">
            <label for="recipient-name" class="col-form-label">手机号</label>
            <input type="text" class="form-control modal-input" id="recipient-name111">
          </div>
          
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
<script>
  //获取token
  var token=sessionStorage.getItem("token")
  //请求数据
 function getData(){
  $.ajax({
    url:"http://182.92.164.74:8002/user/info?token="+token,
    type:"get",
    headers:{
      "Authorization":token
    },
    success:function(data){
      var user=data.data
      $("tbody th").eq(0).after(`<td>`+user.username+`</td>`)
      $("tbody th").eq(1).after(`<td>`+user.realname+`</td>`)
      $("tbody th").eq(2).after(`<td>`+user.telephone+`</td>`)
      $("tbody th").eq(3).after(`<td>`+user.gender+`</td>`)
      $("tbody th").eq(4).after(`<td>`+user.registerTime+`</td>`)
      $("tbody th").eq(5).after(`<td>`+user.status+`</td>`)
      //给修改按钮绑定事件 
          //将数据放到模态框中
          $("#exampleModal input").eq(0).val(user.username)
         $("#exampleModal input").eq(1).val(user.realname)
          if(user.gender=="male"){
            $("#inlineRadio1").prop("checked","checked")
          }else{
            $("#inlineRadio2").prop("checked","checked")
          }
          
          $("#exampleModal input").eq(2).val(user.password)
         $("#exampleModal input").eq(5).val(user.telephone)
        id=user.id
    }
    
  })

 }
 getData()
         
        

  // 给保存按钮绑定事件
  $(".btn-primary") .click(()=>{

        //获取模态框的数据
        username=$("#exampleModal input").eq(0).val();
        realname=$("#exampleModal input").eq(1).val();
        if($("input:radio:checked").val()=="option1"){
            gender="male"
          
        }else if($("input:radio:checked").val()=="option2"){
          
          gender="female"
        }
        telephone=$("#exampleModal input").eq(5).val();
        password=$("#exampleModal input").eq(2).val()
        //  id=user.id
      console.log(username,realname,password,telephone,gender,id)
      // console.log(id)
      $.ajax({
        url:"http://182.92.164.74:8002/baseUser/saveOrUpdate?username="+username+"&password="+password+"&telephone="+telephone+"&realname="+realname+"&gender="+gender+"&id="+id,
        type:"post",
        headers:{
          "Authorization":sessionStorage.getItem("token")
        },
        success:function(data){
          console.log(data)
            $("#exampleModal").modal("hide")
          //清空 刷新
          $("td").empty()
            getData()
            
        }
      })
  })
</script>
